iT邦幫忙

2023 iThome 鐵人賽

DAY 22
0

今天我們要來創建我的理想網頁啦~
因為我實作的重點不在如何建立HTML
所以對於這個部份我就不多做說明了~
那麼就來看看我是怎麼建立網頁的吧/images/emoticon/emoticon76.gif


再跟大家回顧一下我的實作目標
https://ithelp.ithome.com.tw/upload/images/20231006/20162525Tz2bug5Wma.jpg

首先,我要先做最重要的地方,輸入餐廳類型的欄位。

https://ithelp.ithome.com.tw/upload/images/20231006/20162525eiG1ZoF9B8.png
實際畫面
https://ithelp.ithome.com.tw/upload/images/20231006/20162525cYxugemvz8.png

接著,是一樣重要的提交按鈕

https://ithelp.ithome.com.tw/upload/images/20231006/20162525Z0JQssvXtx.png
實際畫面
https://ithelp.ithome.com.tw/upload/images/20231006/20162525SESZzvpO0I.png

接下來,放上我手繪的圖標

https://ithelp.ithome.com.tw/upload/images/20231006/201625252mmYyady6q.png
實際畫面
https://ithelp.ithome.com.tw/upload/images/20231006/20162525aRhomIDFSA.png


!小提示!

要放的圖示需要跟HTML放在同一個資料夾中
網頁才能讀到圖片喔~
在這裡我們直接丟到昨天創的新實作資料夾就好啦~
https://ithelp.ithome.com.tw/upload/images/20231006/20162525tLHefEIfDM.png

另外alt中的文字,平常並不會顯示
但是如我我們圖片跑不出來
他就會代替圖片出來跟大家見面啦~
如果圖片中有甚麼重要內容
可以將其存在alt
以備不時之需喔~


最後呢,我想要將這些東東都移到畫面中間

對,沒錯。就是置中/images/emoticon/emoticon37.gif
https://ithelp.ithome.com.tw/upload/images/20231006/20162525UNdeS9048j.png
實際畫面
https://ithelp.ithome.com.tw/upload/images/20231006/20162525AZQCfrEctN.png


哼哼!越來越像我預想中的畫面了!
本宮非常滿意/images/emoticon/emoticon35.gif
明天我們要加上CSS渲染我們的網頁
讓網頁變得更~漂亮
有興趣的人要記得來看看喔!


上一篇
DAY21-專案環境架設
下一篇
DAY23-網頁畫面優化
系列文
我要成為AI溝通師!30天快速理解Prompt Engineering30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言